<template>
	<view class="container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"
		@touchcancel="onTouchEnd">
		<view class="marquee-track" :style="{ transform: `translateX(-${offset}px)` }">
			<view class="item" v-for="(item,index) in copyList" :key="index"
				:style="{paddingRight:`${itemSpacing}rpx`}">
				<slot :item="item" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				offset: 0, // 当前偏移量
				isTouching: false, // 是否正在触摸
				touchStartX: 0, // 触摸开始位置
				lastOffset: 0, // 触摸开始时的offset
				timer: null, // 自动滚动定时器
			}
		},
		props: {
			itemWidth: { // 自定义传入的项宽度
				type: Number,
				required: true,
			},
			speed: { // 自定义滚动速度
				type: Number,
				default: 1,
			},
			enableScroll: { // 是否允许滚动
				type: Boolean,
				default: true,
			},
			//item的间距
			itemSpacing: {
				type: Number,
				default: 20
			},
			list: {
				type: Array,
				default: () => ([]),
				required: true
			}
		},
		onReachBottom() {},
		computed: {
			// 计算所有项的总宽度（重复显示时会用到）
			singleTrackWidth() {
				const children = this.list
				if (children.length === 0) return 0;
				return children.length * uni.upx2px(this.itemWidth + this.itemSpacing);
			},
			copyList() {
				return [...this.list, ...this.list]
			}
		},
		onLoad() {},
		onShow() {},
		mounted() {
			this.startAutoScroll();
		},
		beforeDestroy() {
			this.stopAutoScroll();
		},
		methods: {
			startAutoScroll() {
				this.stopAutoScroll();
				if (!this.enableScroll) return;

				this.timer = setInterval(() => {
					if (!this.isTouching) {
						this.offset += this.speed;
						if (this.offset >= this.singleTrackWidth) {
							this.offset -= this.singleTrackWidth; // 循环滚动
						}
					}
				}, 20);
			},
			// 停止自动滚动
			stopAutoScroll() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			// 开始触摸事件，停止自动滚动
			onTouchStart(e) {
				if (!this.enableScroll) return;
				this.isTouching = true;
				this.stopAutoScroll();
				this.touchStartX = e.touches[0].clientX;
				this.lastOffset = this.offset;
			},
			// 移动事件，动态更新滚动偏移量
			onTouchMove(e) {
				if (!this.enableScroll) return;
				const currentX = e.touches[0].clientX;
				let deltaX = this.touchStartX - currentX;
				let newOffset = this.lastOffset + deltaX;

				// 保证滚动在合理范围内
				if (newOffset < 0) {
					newOffset += this.singleTrackWidth;
				} else if (newOffset >= this.singleTrackWidth) {
					newOffset -= this.singleTrackWidth;
				}

				this.offset = newOffset;
			},
			// 触摸结束时，恢复自动滚动
			onTouchEnd() {
				if (!this.enableScroll) return;
				this.isTouching = false;
				this.startAutoScroll();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;

		.marquee-track {
			width: 100%;
			will-change: transform;
			white-space: nowrap;
			box-sizing: border-box;
			display: flex;

			.item {
				flex: 0 0 auto;
				box-sizing: border-box;
			}
		}
	}
</style>